<template>
  <div class="padding flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="报表类型">
          <el-select v-model="type">
            <el-option :value="1" label="月报"></el-option>
            <el-option :value="2" label="日报"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="统计区间">
          <el-date-picker
            v-model="value" :type="pickerType"
            :format="pickerFormatter" :value-format="pickerFormatter"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <h1 class="table-title text-center">{{ tableTitle }}</h1>
    <div class="flex justify-between table-desc padding-vertical">
      <span>统计范围：{{ range }}</span>
      <span>统计区间：{{ value }}</span>
    </div>
    <el-table
      class="table" v-loading="loading" :data="lists" height="100%"
      :header-cell-style="{
        backgroundColor: themeColor,
        color: 'white'
      }"
      :span-method="spanMethod"
    >
      <div slot="empty" class="empty-lists">
        <svg-icon name="search"></svg-icon>
        <span class="empty-text">暂无数据</span>
      </div>
      <el-table-column v-for="column in columns" :key="column.label" align="center" v-bind="column"></el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.table-title {
  font-weight: 500;
}
.table-desc {
  color: gray;
}
</style>

<script>
export default {
  name: 'statistical-tables-on-energy-use',
  data () {
    return {
      type: 1,
      value: this.$dayjs().format('YYYY-MM'),
      range: '全厂',
      loading: false,
      lists: [],
      columns: [
        { label: '能源用途', prop: 'col1' },
        { label: '能源用途1', prop: 'col2' },
        { label: '电力（千瓦时）', prop: 'col3' },
        { label: '其它原煤（吨）', prop: 'col4' },
        { label: '热力（百万千焦）', prop: 'col5' },
      ],
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    pickerType () {
      const { type } = this
      return type === 1 ? 'month' : 'date'
    },
    pickerFormatter () {
      const { type } = this
      return type === 1 ? 'yyyy-MM' : 'yyyy-MM-dd'
    },
    tableTitle () {
      const { type } = this
      return `能源用途统计${type === 1 ? '月报' : '日报'}表`
    },
  },
  watch: {
    type (val) {
      const value = this.value || undefined
      this.value = this.$dayjs(value).format(val === 1 ? 'YYYY-MM' : 'YYYY-MM-DD')
    }
  },
  mounted () {
    this.getLists()
  },
  methods: {
    spanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 第0行起(含）后2行要合并，第2行起（含）后3行要合并
        const t = {
          0: 2,
          2: 3,
          5: 2
        }
        const ts = Object.keys(t).map(v => Number(v))
        if (ts.includes(rowIndex)) {
          return {
            rowspan: t[rowIndex],
            colspan: 1
          }
        }

        return {
          rowspan: 0,
          colspan: 0
        }
      }
    },
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading = false
          this.lists = [
            {
              col1: '购进',
              col2: '购进已消费',
              col3: '0',
              col4: '0',
              col5: '0'
            },
            {
              col1: '购进',
              col2: '购进未消费',
              col3: '0',
              col4: '0',
              col5: '0'
            },
            {
              col1: '消费',
              col2: '能源消费合计',
              col3: '0',
              col4: '0',
              col5: '0'
            },
            {
              col1: '消费',
              col2: '工业生产消费',
              col3: '0',
              col4: '0',
              col5: '0'
            },
            {
              col1: '消费',
              col2: '非工业生产消费',
              col3: '0',
              col4: '0',
              col5: '0'
            },
            {
              col1: '产出',
              col2: '用于工业',
              col3: '0',
              col4: '0',
              col5: '0'
            },
            {
              col1: '产出',
              col2: '用于非工业',
              col3: '0',
              col4: '0',
              col5: '0'
            },
          ]
        }, 300)
      })
    },
  },
}
</script>
